<template>
  <div class="shop">
    <p class="title">订单基本信息</p>
    <el-table :data="baseTable"
      border
      style="width:100%;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="订单编号"
        prop="order_num"></el-table-column>
      <el-table-column label="用户账号"
        prop='username'></el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
          <p v-if='scope.row.pay_way == 1'>微信支付</p>
          <p v-if='scope.row.pay_way == 2'>支付宝支付</p>
        </template>
      </el-table-column>
      <el-table-column label="订单类型">
        <template slot-scope="scope">
          <p v-if='scope.row.order_type==1'>自营订单</p>
          <p v-if='scope.row.order_type==2'>本地订单</p>
        </template>
      </el-table-column>
      <el-table-column label="订单金额">
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label="实际支付">
        <template slot-scope="scope">
          <p v-if="scope.row.actual_price != 0">¥{{scope.row.actual_price}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <p v-if='scope.row.status == 1'
            class="orderstatus">待提交</p>
          <p v-if='scope.row.status == 2'
            class="orderstatus">待收货</p>
          <p v-if='scope.row.status == 3'
            class="orderstatus">部分完成</p>
          <p v-if='scope.row.status == 4'
            class="orderstatus">已完成</p>
          <p v-if='scope.row.status == 5'
            class="orderstatus">已关闭</p>
        </template>
      </el-table-column>
    </el-table>

    <p class="title">商品信息</p>
    <el-table :data="skuData"
      border
      style="width:100%;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='商品图片'>
        <template slot-scope="scope">
          <img style="width:100px;height:100px;"
            class="sku_pic_margin"
            :src="scope.row.pic_url? scope.row.pic_url : errorImg"
            alt />
        </template>
      </el-table-column>
      <el-table-column label='商品名称'
        prop='name'></el-table-column>
      <el-table-column label='商品id'
        prop='shop_id'></el-table-column>
      <el-table-column label='数量'
        prop='num'></el-table-column>
      <el-table-column label='商品sku'
        prop='sku'></el-table-column>
      <el-table-column label='售价'>
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label='物流信息'
        fixed="right">
        <template slot-scope="scope">
          <p style="color:#f4222d;cursor:pointer;"
            @click="lookWuliuInformation(scope.row.shop_id)">查看物流信息</p>
        </template>
      </el-table-column>
    </el-table>

    <p class="title">利润信息</p>
    <el-table :data="profitData"
      border
      style="width:100%;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='套餐售价'>
        <template slot-scope="scope">
          <p v-if="scope.row.price != 0">¥{{scope.row.price}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
      <el-table-column label='用户支付'>
        <template slot-scope="scope">
          <p v-if="scope.row.actual_price != 0">¥{{scope.row.actual_price}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
      <el-table-column label='套餐供货成本'>
        <template slot-scope="scope">
          <p v-if="scope.row.chengben != 0">¥{{scope.row.chengben}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
      <el-table-column label="套餐毛利">
        <template slot-scope="scope">
          <p v-if="scope.row.profit != 0">¥{{scope.row.profit}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
      <el-table-column label="已分润(服务商推荐奖)">
        <template slot-scope="scope">
          <p v-if="scope.row.getProfit != 0">¥{{scope.row.getProfit}}</p>
          <p v-else>0</p>
        </template>
      </el-table-column>
    </el-table>

    <p class="title">收货地址</p>
    <el-table :data="addressData"
      border
      style="width:100%;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='收货人' prop="name"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="收货地址" prop="address"></el-table-column>
    </el-table>
  </div>
</template>



<script>
import errorImg from "@/assets/images/error_img.png";
export default {
  data () {
    return {
      serviceId: '',
      errorImg,
      baseTable: [{ order_num: '201707196398345', username: '18000000000', pay_way: 1, order_type: 1, price: '199.00', actual_price: 0, status: 1 }],




      skuData: [{ pic_url: '', name: 'adidas 三叶草 男子经典鞋BD7676', shop_id: '10011002', num: '2', sku: 'XL/黑色', price: '199.00' }, { pic_url: '', name: 'adidas 三叶草 男子经典鞋BD7676', shop_id: '10011002', num: '2', sku: 'XL/黑色', price: '199.00' }, { pic_url: '', name: 'adidas 三叶草 男子经典鞋BD7676', shop_id: '10011002', num: '2', sku: 'XL/黑色', price: '199.00' }],

      profitData: [{ price: '2000.00', actual_price: '2000.00', chengben: '200', profit: '1800', getProfit: '400' }],
      addressData: [{ name: '大鸭梨', phone: '18888888888', address: '滨江区滨康路101号海威大厦' }]



    }
  },
  mounted () {
    this.serviceId = this.$route.query.serviceId
  },
  methods: {

    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .title {
    margin: 20px 0;
    font-size: 18px;
  }

  .orderstatus {
    color: #f4222d;
  }
}
</style>